<template>
  
  <div>

       
     <div>
        <van-row>
           <van-col span="24"> <heardes/> </van-col>

          <van-col span="5"> <left/>  </van-col>

          <van-col width='200px'>
            组织名称：<input type="text" name="" id=""> &emsp;&emsp;  <van-button><van-icon name="search" /> 查询 </van-button> &emsp;&emsp;
             <van-button><van-icon name="replay" /> 重置 </van-button>     <br>
           <!-- <van-row> -->
               <el-button type="primary" is-link @click="showPopup"> + 新增</el-button>
            <van-popup v-model:show="show">
              
            
                  <van-field label="组织名称:" placeholder="请输入组织名称"/>
                  组织类型:

                  <el-checkbox-group v-model="checkList">
                    <el-checkbox label="企业"></el-checkbox>
                    <el-checkbox label="部门"></el-checkbox>
                    
                  </el-checkbox-group>


                  <van-field label="组织缩写:" placeholder="请输入组织缩写"/>

                  <el-input-number v-model="num" controls-position="right" 
                  @change="handleChange" :min="1" :max="100"></el-input-number>

                   <el-button type="primary" plain>关闭</el-button>
                  <el-button type="success" plain>确定</el-button>

           

          
              </van-popup>&emsp;&emsp;

              <van-uploader :after-read="upload"><el-button type="primary">导入</el-button></van-uploader>&emsp;&emsp;

            <el-button type="primary" @click="exp">导出</el-button>&emsp;&emsp;

            <tree @pid="getid"/>

           

            
            
           <!-- </van-row> -->
          </van-col>
      </van-row>

     </div>
  </div>

</template>

<script>
import heardes from '../comm/heardes.vue'

import Tree from '../comm/tree.vue'
import axios from '../../http/axios'
import Left from '../comm/left.vue'
import fileDownload from "js-file-download";

import { ref } from 'vue';




export default {
  components: { heardes,Tree ,Left},

  // 复选框
  
  

   //弹出层  
      setup() {
        const show = ref(false);
        const showPopup = () => {
        show.value = true;
        };
        return{
          show,
          showPopup,
        }
    },
  data(){
    return{
        code:'',
        num: 1,
        checkList: ['企业']
    }
  },
  methods:{
     
    // 组织排序倒计时
     handleChange(value) {
        console.log(value);
      },

      // 导入
      upload(file){
          let fromdata = new FormData()
          fromdata.append('file',file.file)
        //   axios({url:'upload',method:'post',data:fromdata}).then(res=>{
             axios('/upload','post',fromdata).then(res=>{
                console.log(res);
        //       console.log(res);
                alert("导入成功")   
          })
      },

      // 导出
      exp(){
          axios('download','post').then(res=>{
              fileDownload(res.data,'file.xls');
          })
      },

      // 获取传值code
      getid(pid){

          this.pid = pid 
          

      }


  }

   
}
</script>

<style>
/* .dd{
  width: 500px;
  height: 400px; */
/* } */
</style>